<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>计划上报年计划表管理</title>
<meta name="decorator" content="default"/>
<style>
	.none{
		display: none;
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		initial.tableHead();
		initial.tableBody();
		addEvent();
	});
	
	function page(n,s){
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").submit();
       	return false;
    }
    
   	//汇总
    var officeList = ${officeListJson };
    console.log(officeList);
    var size = officeList.length;
    /* var summaryDetailList = ${summaryDetailList};
    console.log(summaryDetailList);
    var summaryDetailListSize = summaryDetailList.length; */
    var list = ${list};
    console.log(list);
    var listSize = list.length;
    var initial= {
    	tableHead: function(){
    	var html= `<th>疫苗名称</th>
			<th>免疫程序剂次数</th>
			<th>规格（人份/支）</th>`;
    		for(i=0;i<size;i++){
    			html = html+"<th data-code = "+officeList[i].code+">"+officeList[i].name+"</th>";
    		}
    		html = html+"<th>总计</th>";
    		$("#contentTable thead tr").html(html);
    	},
    	tableBody: function(){
	    	if(listSize>0){
	    		/* var a = summaryDetailListSize/size;
	    		var newList = [];
	    		var listName = [];
	    		for(z = 0;z<a;z++){
	    			newList.push(summaryDetailList[z]);
	    		}
	    		for(y = 1;y<size;y++){
	    			listName.push("realNumMonth"+y);
	    		}
	    		for(i=1;i<size;i++){
	    			for(j=0;j<a;j++){
		    			var x = j+i*a;
		    			for(l = 0;l<size-1;l++){
		    				var c = listName[l];
		    				newList[j][c] = summaryDetailList[x].realNumMonth;
		    			}
	    			}
	    		}
	    		console.log(newList); */
	    		/* var html = "<tr>";
	    		for(var d=0;d<newList.length;d++){
	    			var all1 = 0; 
	    			html = html+`<tr>+
	    			<td>`+newList[d].vaccname+`</td>
	    			<td>`+newList[d].dosage+`</td>
	    			<td>`+newList[d].spec+`</td>
	    			<td>`+newList[d].realNumMonth+`</td>`;
	    			for(f=0;f<size-1;f++){
	    				var n = listName[f];
	    				all1 += newList[d][n];
	    				html+=`<td>`+newList[d][n]+`</td>`;
	    			}
	    			html+=`<td>`+(newList[d].realNumMonth+all1)+`</td>
	    			</tr>`;
	    		} */
	    		var html = "<tr>";
	    		for(var d=0;d<list.length;d++){
	    			var all1 = 0; 
	    			html = html+`<tr>+
	    			<td>`+list[d].vaccname+`</td>
	    			<td>`+list[d].dosage+`</td>
	    			<td>`+list[d].spec+`</td>
	    			<td>`+list[d].realNumMonth+`</td>`;
	    			for(y = 1;y < size; y++){
	    				var n = 'realNumMonth'+y;
	    				all1 += list[d][n];
	    				html += `<td>`+list[d][n]+`</td>`;
	    			}
	    			html+=`<td>`+(list[d].realNumMonth+all1)+`</td>
	    			</tr>`;
	    		}
	    		$("#contentTable tbody").html(html);
	    	}else{
	    		html = "<tr><th colspan='11' style='text-align: center;'>暂无数据</th></tr>";
	    		$("#contentTable tbody").html(html);
	    	}
    	}
    };
    
    //分支
    var addEvent = function(){
    	$(document).on('click',".each",function(){
    		$("#contentTable2").removeClass("none");
    		$("#contentTable").addClass("none");
    		var data = {
    			storecode:	$(this).find("a").attr("data-code"),
    			planDate: $(".input-medium").val()
    		}
    		$.ajax({
    			url: "${ctx}/plan/bsPlanMonth/monthStatisticalBranch",
    			data: data,
    			type: "post",
    			dataType: "json",
    			success: function(data){
    				if(data.length>0){
    					var html = "";
    					for(i=0;i<data.length;i++){
    						html+=`<tr>
    						<td>`+data[i].vaccname+`</td>
    						<td>`+data[i].dosage+`</td>
    						<td>`+data[i].spec+`</td>
    						<td>`+data[i].planPopulation+`</td>
    						<td>`+data[i].lossFactor+`</td>
    						<td>`+data[i].planNumYear+`</td>
    						<td>`+data[i].planNumMonth+`</td>
    						<td>`+data[i].storenum+`</td>
    						<td>`+data[i].realNumMonth+`</td>
    						<td>`+data[i].planNumYearRemain+`</td>
    						<td>`+data[i].planNumYearRemainLast+`</td>
    						</tr>`;
    					}
    					$("#contentTable2 tbody").html(html);
    				}else{
    					html = "<tr><th colspan='11' style='text-align: center;'>暂无数据</th></tr>";
    					$("#contentTable2 tbody").html(html);
    				}
    			}
    		});
    	});
    	
    	$(".all").click(function(){
    		$("#contentTable2").addClass("none");
    		$("#contentTable").removeClass("none");
    		$("#searchForm").submit();
    	});
    	
    	$(".nav-tab").click(function(){
    		$(this).addClass("active").siblings().removeClass("active");
    	})
    	
    	$("#btnExport").click(function(){
    		layer.confirm("确认要导出数据吗？", {
				btn: ['确认','取消'], //按钮
				shade: true, //不显示遮罩
				icon : 0
			}, function(index){
				var temp = $("#searchForm").attr("action");
				$("#searchForm").attr("action","${ctx}/plan/bsPlanMonth/export");
				$("#searchForm").submit();
				layer.close(index);
				$("#searchForm").attr("action",temp);
			}, function(){
				layer.close();
			});
    	});
    }
</script>
</head>
<body>
<ul class="nav nav-tabs">
	<li class=" nav-tab active all"><a href="#">汇总统计</a></li>
	<c:forEach items="${officeList}" var="office">
		<li class="nav-tab each"><a href="javascript:void(0)" data-code="${office.code}">${office.name}</a></li>
	</c:forEach>
</ul>
<form:form id="searchForm" modelAttribute="bsPlanMonth" action="${ctx}/plan/bsPlanMonth/monthStatistical" method="post" class="breadcrumb form-search">
	<ul class="ul-form">
		<li><label>地区：</label>
			<sys:treeselect2 id="areaCode" name="areaCode" value="${bsPlanMonth.areaCode}" labelName="areaName" labelValue="${bsPlanMonth.areaName}"
				title="部门" url="/sys/office/treeData?type=2" cssClass="input-small" allowClear="true" notAllowSelectParent="false"/>
		</li>
		<li><label>计划日期：</label>
			<input name="planDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
				value="<fmt:formatDate value="${bsPlanMonth.planDate}" pattern="yyyy-MM"/>"
				onclick="WdatePicker({dateFmt:'yyyy-MM',isShowClear:false});"/>
		</li>
		<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
		<li class="btns"><button id="btnExport" class="btn btn-primary" type="button" >导出</button></li>
		<li class="clearfix"></li>
	</ul>
</form:form>
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			
		</tr>
	</thead>
	<tbody>
	
	</tbody>
</table>
<table id="contentTable2" class="table table-striped table-bordered table-condensed none">
	<thead>
		<tr>
			<th>疫苗名称</th>
			<th>免疫程序剂次数</th>
			<th>规格（人份/支）</th>
			<th>应种人口数</th>
			<th>损耗系数</th>
			<th>年度计划数（支）</th>
			<th>月度计划数（支）</th>
			<th>上月库存数(支)</th>
			<th>本月领用计划数（支）</th>
			<th>年度累计领取数（支）</th>
			<th>年度计划剩余数（支）</th>
		</tr>
	</thead>
	<tbody>
	
	</tbody>
</table>
</body>
</html>